<template>
        <mian-layout style="background:#fff">
            <el-form :model="ruleForm" size="small" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm">
                <el-form-item label="运营活动名称" prop="activityName">
                  <el-input v-model="ruleForm.activityName" placeholder="请填写运营活动名称" style="width: 600px;" :disabled="onlyLook==1"/>
                </el-form-item>
                <el-form-item label="活动展示图片" prop="activityImg">
                  <div class="upfileTips" style="display:flex">
                    <upload-file v-if="!id || details" :limit="1" v-model="ruleForm.activityImg" type="img"/>
                    <p>支持JPG、JFPG、PNG等图片格式，文件大小控制在2M以内</p>
                  </div>
                </el-form-item>
                <el-form-item label="运营活动描述" prop="activityDesc">
                  <el-input v-model="ruleForm.activityDesc" type="textarea" placeholder="运营活动描述" :autosize="{ minRows: 6, maxRows: 10}" style="width: 600px;" :disabled="onlyLook==1"/>
                </el-form-item>
                <el-form-item label="运营活动规则" prop="activityRule">
                  <el-input v-model="ruleForm.activityRule" type="textarea" placeholder="运营活动规则" :autosize="{ minRows: 6, maxRows: 10}" style="width: 600px;" :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="活动开始时间" prop="activityStartTime">
                  <el-date-picker v-model="ruleForm.activityStartTime" type="datetime" placeholder="选择活动开始时间" value-format="yyyy-MM-dd HH:mm:ss"/>
                </el-form-item>
                <el-form-item label="活动结束时间" prop="activityEndTime">
                  <el-date-picker v-model="ruleForm.activityEndTime" type="datetime" placeholder="选择活动结束时间" value-format="yyyy-MM-dd HH:mm:ss"/>
                </el-form-item>
                <el-form-item label="请选择参加活动的卡片" prop="authorName">
                  <div class="cardBox">
                    <!-- <h4>请选择参加活动的卡片</h4> -->
                    <el-button type="success" size="mini" icon="el-icon-plus" @click="dialogVisible=true">选择卡片</el-button>
                    <div style="padding:10px 0 0 0">
                      <selected-card :lists='checkedList' @del="delList"/>
                    </div>
                  </div>
                </el-form-item>
                
                <el-form-item>
                    <template>
                        <template v-if="onlyLook==1">
                            <el-button icon="el-icon-back" @click="$router.back()" type="info">返回</el-button>
                            <el-button type="success" icon="el-icon-edit" @click="onlyLook=2">修改</el-button>
                        </template>
                        <template v-else>
                            <el-button type="primary" icon="el-icon-check" :loading="btnLoading" @click="save('ruleForm')">保存</el-button>
                            <my-back icon="el-icon-close">取消</my-back>
                        </template>
                    </template>
                </el-form-item>

            </el-form>
            <my-dialog v-if="dialogVisible" :show.sync="dialogVisible" :showBtn="true" width="80%" title="选择卡片" @confirm="getSelectData">
                <card-list @change="getTableSelectData" :selectList='checkedList'/>
            </my-dialog> 
        </mian-layout>
        
</template>

<script>
import {mapGetters} from 'vuex'
import {
  add_activity,
  get_activity_detail,
 edit_activity,
 get_card_for_aid
} from '@/api/collext'
import uploadFile from '@/components/public/uploadFile.vue'
import {mergeObject,filterStr} from '@/utils/index'
import myBack from '@/components/public/myBack.vue'
import selectedCard from './components/selectedCard.vue'
import cardList from './components/cardList.vue'
import myDialog from '@/components/public/myDialog';
export default {
  name: '',
  components:{
    uploadFile,
    myBack,
    selectedCard,
    cardList,
    myDialog
  },
  data() {
    return {
      ruleForm: {
        activityName:'',
        activityImg:'',
        activityDesc:'',
        activityRule:'',
        activityStartTime:'',
        activityEndTime:'',
        cardIdList:[]
      },
      rules: {},
      details:'',
      id:'',
      onlyLook:'',
      btnLoading:false,
      dialogVisible:false,
      checkedList:[],
      tmsldata:[],
      page:{
          pageSize:8,
          pageIndex:1,
          total:0,
      },
      loading:true,
      tableData:[],
      multipleSelectionIds:[],
    }
  },
  async created() {
    this.id = this.$route.query.id
    this.onlyLook = this.$route.query.onlyLook
    if(this.id){  // 编辑、查看
      const res = await get_activity_detail(this.id)
      if(res.success){
        this.details = res.data
        this.ruleForm = mergeObject(this.ruleForm,res.data)
      }
      this.getCards()
    }
  },
  methods: {
    // 确定
    save(formName) {
      this.ruleForm.cardIdList = []
      if(!this.ruleForm.activityName){
        return this.$message.warning('请输入活动名称')
      }else if(!this.ruleForm.activityImg){
        return this.$message.warning('请上传活动展示图片')
      }else if(!this.ruleForm.activityDesc){
        return this.$message.warning('请输入运营活动描述')
      }else if(!this.ruleForm.activityRule){
        return this.$message.warning('请输入运营活动规则')
      }else if(!this.ruleForm.activityStartTime){
        return this.$message.warning('请选择活动开始时间')
      }else if(!this.ruleForm.activityEndTime){
        return this.$message.warning('请选择活动结束时间')
      }
      
      // 获取卡片id
      this.checkedList.forEach(item=>{
        this.ruleForm.cardIdList.push(item.cardId)
      })
      
      // if(this.ruleForm.cardIdList.length<1){
      //   return this.$message.warning('请选择卡片')
      // }
      
      //this.btnLoading = true
      if(this.id){  // 编
          edit_activity({activityId:this.id,...this.ruleForm}).then(res=>{
            if(res.success){
              this.$message.success('修改成功！')
              //this.$router.back()
              this.$store.dispatch('tagsView/myClosePageTab',this.$route)
            }else{
              //this.$message.error("修改失败")
            }
            this.btnLoading = false
          })
      }else{  //新增
          add_activity(this.ruleForm).then(res=>{
            if(res.success){
              this.$message.success('新增成功！')
              //this.$router.back()
              this.$store.dispatch('tagsView/myClosePageTab',this.$route)
            }else{
             // this.$message.error(res.message)
            }
            this.btnLoading = false
          })
      }
      
    },
    getTableSelectData(items){
      this.tmsldata = items
    },
    getSelectData(){
      this.checkedList = [...this.tmsldata]
      // const arr = JSON.parse(JSON.stringify(this.checkedList))
      // for(let i=0;i<this.tmsldata.length;i++){
      //   const item = this.tmsldata[i]
      //   const sdata = this.checkedList.find(ele => ele.cardId == item.cardId)
      //   !sdata && (this.checkedList=[...this.checkedList,item])
      // }
      this.dialogVisible = false
    },
    delList(item){
      const index = this.checkedList.findIndex(ele => ele.cardId == item.cardId)
      this.checkedList.splice(index,1)
    },
    async getCards(){
        get_card_for_aid({
            activityId:this.id,
            limit: this.page.pageSize,
            page: this.page.pageIndex,
        }).then(res=>{
            this.loading = false
            this.checkedList = res.data
            this.page.total = res.total
        })
    },
    tableSelect(items){
        this.$emit('change',items)
    },
    handleChange(index) {
        this.page.pageIndex = index;
        this.getCards();
    },

  }
}
</script>

<style lang="scss" scoped>

.upfileTips{
  display: flex;
  p{
    flex: 1;
    display: flex;
    font-size: 12px;
    color: #999;
    align-items: center; 
    line-height: 24px;
  }
}
.cardBox{
  h4{
    font-size: 18px;
    border-bottom:1px solid #f2ecec ;
    text-align: left;
    line-height: normal;
    padding: 30px 0 10px 0;
    margin: 0 0 10px 0;
    color: #999;
  }
}
</style>




